<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
	<title>表格</title>
	<link rel="stylesheet" type="text/css" href="css/table.css">
</head>
<body>

<table border="1";>
	<!--表头-->
	<thead>
		<tr class="header">
			<th colspan="5">采购清单</th>
		</tr>
		<tr>
			<th>序号</th>
			<th>商品名称</th>
			<th>单价</th>
			<th>数量</th>
			<th>操作</th>
		</tr>
	</thead>
    
    <!--表体-->
	<tbody>
		<tr>
			<td>1</td>
			<td>笔记本</td>
			<td>2.5</td>
			<td>2</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>

		<tr>
			<td>2</td>
			<td>笔记本</td>
			<td>2.5</td>
			<td>2</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>

		<tr>
			<td>3</td>
			<td>笔记本</td>
			<td>2.5</td>
			<td>2</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>

		<tr>
			<td>4</td>
			<td>笔记本</td>
			<td>2.5</td>
			<td>2</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>

		<tr>
			<td>5</td>
			<td>笔记本</td>
			<td>2.5</td>
			<td>2</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>

		<tr>
			<td>6</td>
			<td>笔记本</td>
			<td>2.5</td>
			<td>2</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>

		<tr>
			<td>7</td>
			<td>笔记本</td>
			<td>2.5</td>
			<td>2</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>
		<tr>
			<td colspan="5">
				<p style="text-align: right;">总计</p>
			</td>
		</tr>


	</tbody>

	<div class="shade" style="display: none;">
		<div class="form-wrap">
			<h5 class="form-header">添加商品</h5>
			<div class="addform">
				<input name="goods" type="text" value="" placeholder="请输入商品名称"><br>
				<input name="price" type="text" value="" placeholder="请输入商品单价"><br>
				<input name="num" type="text" value="" placeholder="请输入商品数量"><br>
				<div class="addoption">
				<button id="addBtn">确定</button>
				<button id="missBtn">取消</button>
				</div>
			</div>
		</div>
	</div>
<script type="text/javascript" src="js/jquery.js"></script>


<script type="text/javascript">
	$('tbody tr:odd').addClass('odd');

	$('.addItem').click(function(){
		$('.shade').show();
	});

	$('#missBtn').click(function(){
	$('.shade').hide();
	});

	$('#addBtn').click(function(){
		var goodsname=$('input[name=goods]').val();
		var price=$('input[name=price]').val();
		var num=$('input[name=num]').val();

		/*清空输入框*/
		$('input[name=goods]').val('');
		$('input[name=price]').val('');
		$('input[name=num]').val('');

		/*把表单的值追加到表格的指定位置*/
		var tr='<tr><td>8</td><td>'+goodsname+'</td><td>'+price+'</td><td>'+num+'</td><td><button>删除</button>\
		<button>添加</button></td></tr>'
		$('tbody tr:eq(6)').after(tr);


		

		/*隐藏表单的输入框*/
		$('.shade').hide();

		console.log(goodsname+'--'+price+'--'+num);
	});

</script>

</table>
</body>
</html>